<template>
    <div>
        <h3>{{ title }}</h3>
        <p @click="logMsg(ScriptSetupAttr1)">6.1 {{ ScriptSetupAttr1 }}</p>

        <p>
            6.2 响应式：使用响应式 APIs 来创建
            <button @click="count++">{{ count }}</button>
        </p>
        <p>
            6.3 使用组件: &lt; script setup &gt;范围里的值也能被直接作为自定义组件的标签名使用
            <teleport-comp />
        </p>
        <p
            @click="emits('sendMes')"
        >6.4 defineProps && defineEmits：使用 defineProps 和 defineEmits API 来声明 props 和 emits</p>
        <p>6.5 defineExpose：使用 &lt; script setup &gt;的组件是默认关闭的，也即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在 &lt; script setup &gt;中声明的绑定。为了在明确要暴露出去的属性，得使用 defineExpose</p>
        <p>6.6 可以使用顶层 await</p>
    </div>
</template>

<script setup>
// 1. 顶层的绑定会被暴露给模板
import log from './log'
const logMsg = msg => log(msg)
const ScriptSetupAttr1 = `顶层的绑定会被暴露给模板：包括变量，函数声明，以及 import 引入的内容`

// 2.响应式
import { ref, defineProps, defineEmits, defineExpose } from 'vue'
const count = ref(0)

// 3. 使用组件
import TeleportComp from '../teleport/'

// 4. 使用 defineProps 引用父组件的 title 属性；使用 defineEmits 派发子元素的 sendMes 自定义事件 
defineProps({ title: String })
// const props = defineProps({ title: String })
// console.log('defineProps', props)
const emits = defineEmits(['sendMes'])

// 5. 使用 defineExpose 暴露 ScriptSetupAttr1 和 count
defineExpose({
    ScriptSetupAttr1, count
})
</script>
<style lang="scss" scoped>
</style>